<template>
  <div>
    <div class="one_wrap">
      <div class="one_tou">
        <router-link to="/person">
          <img @click="" class="img1" src="../../assets/个人中心/1个人中心/jiantou.png"/>
          <p class="tou_p">我的返金排行</p>
        </router-link>
      </div>
      <ul class="one_ul">
        <li class="li1 li4">
          <span class="spana">0~499元</span>
          <span class="spana">500~999元</span>
          <span class="spana">1000~1499元</span>
          <img class="imgimg" src="../../assets/个人中心/1个人中心/右箭头.png"/>
        </li>
        <li class="li2 li4" v-for="item in boy">
          <span class="spana">{{item.datee}}</span>
          <span class="spana">{{item.xf}}</span>
          <span class="spana">{{item.ph}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script scoped>
  export default{
    data(){
      return{
        boy:[
          {datee:"2017/06/26",xf:"消费：￥100",ph:"排号 : 10"},
          {datee:"2017/06/26",xf:"消费：￥100",ph:"排号 : 10"},
          {datee:"2017/06/26",xf:"消费：￥100",ph:"排号 : 10"},
          {datee:"2017/06/26",xf:"消费：￥100",ph:"排号 : 10"}
        ]
      }
    },
    methods:{

    }
  }
</script>

<style>
  .one_wrap{
    width: 100%;
  }
  .one_tou{
    height: 2.666rem;
    background: #e53e42;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .one_tou .img1{
    width: 0.638rem;
    height: 1.055rem;
    position: absolute;
    top: 1rem;
    left: 0.555rem;
  }
  .one_tou .tou_p{
    position: absolute;
    bottom: 0.972rem;
    left: 5.5rem;
    height: 0.972rem;
    font-size: 1rem;
    letter-spacing: 0;
    color: #ffffff;
  }
  .one_wrap .one_ul{
    width: 100%;
    height: 11.25rem;
  }
  .one_ul .li4{
    width: 100%;
    height: 2.222rem;
    border-bottom: 1px solid #CCCCCC;
    background: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .li4 .spana{
    text-align: center;
    font-size: 0.7rem;
    flex: 1;
  }
  .one_ul .li1{
    display: flex;
    width: 100%;
    height: 2.222rem;
    position: relative;
  }
  .one_ul .li1 .spana{
    flex: 1;
    font-size: 0.7rem;
    display: flex;
  }
  .one_ul .li1 span:nth-child(1),.ul .li1 span:nth-child(2){
    margin-left: 0.277rem;
  }
  .one_ul .li1 .imgimg{
    width: 0.277rem;
    height: 0.5rem;
    position: absolute;
    right: 0.555rem;
  }
</style>
